<script>
// 导入ref函数
import { ref } from 'vue';
export default {
  // 定义 setup 函数
  setup() {
    // 调用ref函数创建响应式数据
    const age = ref(18);
    console.log(typeof age, age);

    const incrementAge = () => {
      age.value += 1;
    };
    const decrementAge = () => {
      age.value -= 1;
    };

    // 定义一个对象类型数据
    const obj = ref({ age: 20, name: 'Jack' });
    // 修改这个对象
    const changeObj = function () {
      obj.value.name = obj.value.name + Math.random();
      obj.value.age = obj.value.age + 2;
    };

    // 返回数据和函数给到 vue 框架
    return { age, incrementAge, decrementAge, obj, changeObj };
  },
};
</script>
<template>
  <div>
    <!-- template 中使用响应式数据，注意和 script 中对比 -->
    <h1>年龄：{{ age }}</h1>
    <button @click="incrementAge">+1</button>
    <button @click="decrementAge">-1</button>
    <hr />
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <button @click="changeObj">改obj</button>
  </div>
</template>
